// base
import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
// redux
import { connect } from '@tarojs/redux'
import { DOREQUESTAVATORPAGE } from './store/actions/pageavatorpage'
import { UPDATEPAGEAVATORPAGE } from './store/types/pageavatorpage'
import { UPDATEUSERINFO } from '../../store/types/userinfo'
// less
import './index.less'

// libs
import { showToast } from '../../crossplatform/apiservice/toast'
import { switchTab } from '../../crossplatform/apiservice/navigate'
import pagejumplist from '../../configuration/pagejumplist.json'
import scaleImageSrc from '../../util/pagemethods/scaleImageSrc'
import { avaterCamerar, getGenderIcon, checkPhoneMark } from '../../configuration/staticimg'
import { putUploadImgRequest } from '../../service/user-archive-controller'
import If from '../../components/page-components/if'
import { doUpload } from '../../util/pagemethods/upload'

const mapActiontoProps = dispatch => ({
  updateState (payload) {
    dispatch({
      type: UPDATEPAGEAVATORPAGE,
      payload: {
        ...payload
      }
    })
  },
  updateUserState (payload) {
    dispatch({
      type: UPDATEUSERINFO,
      payload: {
        ...payload
      }
    })
  },
  dorequest () {
    return new Promise(resolve => {
      let promise = DOREQUESTAVATORPAGE()
      dispatch(promise)
      promise.payload.then(data => {
        clearTimeout(this.timer)
        this.timer = null
        resolve(data)
      })
    })
  }
})

@connect(
  ({ pageavatorpage, userinfo }) => ({
    ...pageavatorpage,
    ...userinfo
  }),
  mapActiontoProps
)
class AvatorPage extends Component {
  config = {
    navigationBarTitleText: '上传头像'
  }
  constructor (props) {
    super(props)
    this.state = {}
  }

  componentWillMount () {
    // onLoad
  }

  componentDidMount () {
    // onready
  }

  componentDidShow () {
    // onshow
  }

  componentDidHide () {
    // onhide
  }

  componentWillUnmount () {
    // onUnload
  }

  queryWrap = () => {
    this.props.dorequest()
  }

  upload = () => {
    // 打开图片选择
    doUpload('avatar').then(({ status: uploadStatus, url }) => {
      if (uploadStatus) {
        const { role } = this.props
        if (role == 'personal') {
          // C端上传头像
          const { userId } = this.props
          let type = '0'
          let userInfoC = { ...this.props.userInfoC }
          userInfoC.userAvator = url
          this.props.updateUserState({
            userInfoC
          })
          putUploadImgRequest({ imgUrl: url, userId, type }).then(({ data }) => {
            const { status, message } = data
            if (status) {
            } else {
              showToast({
                title: message || '上传失败'
              })
            }
          })
        } else {
          // B端上传头像
          const { userId } = this.props
          let type = '1'
          let userInfoB = { ...this.props.userInfoB }
          userInfoB.userAvator = url
          this.props.updateUserState({
            userInfoB
          })
          putUploadImgRequest({ imgUrl: url, userId, type }).then(({ data }) => {
            const { status, message } = data
            if (status) {
            } else {
              showToast({
                title: message || '上传失败'
              })
            }
          })
        }
      } else {
        showToast({
          title: '上传失败'
        })
      }
    })
  }

  back = () => {
    switchTab({
      url: `${pagejumplist['self-center'].path}`
    })
  }

  render () {
    const {
      role,
      userInfoC: { gender, userName, userAvator },
      userInfoB: { sex, userName: userNameB, userAvator: userAvatorB }
    } = this.props
    return (
      <View className="AvatorPage_id23570">
        <View className="image-wrap" onClick={this.upload}>
          <If visible={role == 'personal'}>
            <Image
              className="imagels"
              lazy-load
              mode="aspectFill"
              src={scaleImageSrc(userAvator, 320) || avaterCamerar}
            />
          </If>
          <If visible={role == 'company'}>
            <Image
              className="imagels"
              lazy-load
              mode="aspectFill"
              src={scaleImageSrc(userAvatorB, 320) || avaterCamerar}
            />
          </If>
        </View>
        <If visible={role == 'personal'}>
          <View class="user-info">
            <View className="user-name">{userName}</View>
            <Image
              className="user-sex"
              src={gender == 'female' ? getGenderIcon('female') : getGenderIcon('male')}
            />
          </View>
        </If>
        <If visible={role == 'company'}>
          <View class="user-info">
            <View className="user-name">{userNameB}</View>
            <Image
              className="user-sex"
              src={sex == 'female' ? getGenderIcon('female') : getGenderIcon('male')}
            />
          </View>
        </If>
        <View className="img-btn" onClick={this.back}>
          <Image src={checkPhoneMark} />
        </View>
      </View>
    )
  }
}

export default AvatorPage
